<template>
  <div class="home-view">
    <el-empty description="首页" />
    <h2 class="title">DDDD</h2>
    <h3>TEST-TEST-TEST-TEST</h3>
    <el-button @click="handleChange">改变颜色</el-button>
    <div class="test-div">
      <p class="p1">123</p>
      <p class="p2">456</p>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, defineEmits, onBeforeMount } from 'vue'
const getColor = () => {
  var color = '#'
  //一个十六进制的值的数组
  var array = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
  //得到6个随机数
  for (var i = 0; i < 6; i++) {
    var num = parseInt(Math.random() * 16)
    color += array[num]
  }
  return color
}
const handleChange = () => {
  const cache = getColor()
  document.getElementsByTagName('body')[0].style.setProperty('--theme-color', cache)
}
</script>

<style lang="less" scoped>
.border {
  border: 2px solid #000;
}
.test-div {
  width: 100px;
  height: 100px;
  background: blue;
  .border();
  .color {
    color: antiquewhite;
  }
  .p1 {
    font-size: 20px;
    // color: .color[color];
    color: @pink;
    background-color: @theme;
  }
  .p2 {
    color: antiquewhite;
    // .p1();
  }
}
</style>
